<template>
    <div class="header">
        <div class="layout">
            <div>
                <h1
                    @click="
                        $router.push('/?' + Math.random());
                        icur = 0;
                    "
                >
                    <img src="../assets/img/i_img_logo.png" alt="" />
                </h1>
                <ul>
                    <li
                        v-for="(item, index) in title"
                        :key="index"
                        @click="goLInk(index, item.path)"
                        :class="icur == index ? 'liactive' : ''"
                    >
                        <span>{{ item.text }}</span>
                        <img
                            v-show="icur == index"
                            src="../assets/img/i_img_right+.png"
                            alt=""
                        />
                    </li>
                    <a
                        href="https://m.dongjianpai.com"
                        target="_blank"
                        style="color: #2c3e50"
                    >
                        <li>
                            <span>移动站</span>
                            <!-- <img src="../assets/img/i_img_right+.png" alt="" /> -->
                        </li>
                    </a>

                    <!-- <h2>
                        <a :href="pathPublic" target="_blank">
                            <img
                                src="../assets/img/i_img_white_+ (1).png"
                                alt=""
                            />
                            <span>发布</span></a
                        >
                    </h2> -->
                </ul>
            </div>

            <div>
                <dl>
                    <dd>
                        <img src="../assets/img/i_icon_sousuo.png" alt="" />
                        <input
                            type="text"
                            placeholder="大家都在搜"
                            :value="searchVal"
                            @input="searchValInput"
                            @keydown.enter="goSearch()"
                        />
                    </dd>
                    <dt @click="goSearch()">洞健一下</dt>
                </dl>
                <h3>
                    <a
                        href="https://m.dongjianpai.com/admin/#/userMsg"
                        target="_blank"
                    >
                        <h4>
                            <img src="../assets/img/i_icon_denglu.png" alt="" />
                            <span>登录</span>
                        </h4>
                    </a>
                    <transition enter-active-class="animated fadeInDown">
                        <h2 class="loginprops" v-if="loginpro">
                            <img src="../assets/img/loginerweima.png" alt="" />
                        </h2>
                    </transition>
                </h3>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    name: 'Hea-der',
    props: {
        msg: String,
    },
    data() {
        return {
            icur: '0',
            title: [
                {
                    text: '资讯',
                    path: '/',
                },
                // {
                //     text: '视频',
                //     path: '/',
                // },
                // {
                //     text: '圈子',
                //     path: '/',
                // },
                {
                    text: '专题',
                    path: '/Zhuanti',
                },
                {
                    text: '活动',
                    path: '/Actives',
                },
                {
                    text: '热榜',
                    path: '/HotList',
                },
                // {
                //     text: '移动站',
                //     path: '/',
                //     url: 'https://m.dongjianpai.com',
                // },
            ],
            loginpro: false,
            // pathPublic: 'https://xcx.dongjianpai.com/admin/#/index',
            // pathPublic: 'https://m.dongjianpai.com',
        };
    },
    watch: {
        $route: 'getPath',
    },
    computed: {
        ...mapState({
            searchVal: (state) => state.searchVal,
        }),
    },
    mounted() {
        if (window.location.origin == 'https://www.dongjianpai.com') {
            this.pathPublic = 'https://m.dongjianpai.com/admin';
        }
    },
    methods: {
        ...mapMutations(['changeSsearchVal']),
        getPath() {
            if (this.$router.history.current.path == '/') {
                location.reload();
            }

            // location.reload();
        },
        goLInk(index, path) {
            console.log(path);
            this.icur = index;
            this.$router.push(path);
        },
        goSearch() {
            this.$router.push('/Search');
        },
        searchValInput(e) {
            this.changeSsearchVal(e.target.value);
        },
        loginsetout() {
            setTimeout(() => {
                this.loginpro = !this.loginpro;
            }, 30);
        },
    },
};
</script>

<style scoped lang="scss">
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}
.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.header {
    height: 60px;
    background: #ffffff;
    box-shadow: 0 0 8px 4px #f5f5f5;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.layout {
    width: 1200px;
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

h1 {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    cursor: pointer;
}
ul {
    float: left;
    height: 60px;
    margin-left: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-family: Source Han Sans SC VF;
    font-weight: 400;
    .liactive {
        font-size: 20px;
    }
    li {
        margin: 0 20px;
        position: relative;
        cursor: pointer;

        img {
            position: absolute;
            top: 0;
            right: -7px;
        }
    }
}
h2:hover {
    opacity: 0.8;
}
h2 {
    width: 80px;
    height: 38px;
    background: #e60012;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    float: right;
    cursor: pointer;

    img {
        margin-right: 4px;
    }

    span {
        font-size: 14px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #ffffff;
    }
}

dl {
    width: 320px;
    height: 39px;
    background: #ffffff;
    border: 1px solid #333333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 32px;

    dd {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 230px;
        height: 39px;
        border-right: 1px solid #000000;
        padding-left: 10px;

        input {
            width: 180px;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 0;
            box-sizing: border-box;
            font-size: 14px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            height: 38px;
            line-height: 38px;
            outline: none;
            padding: 0 10px;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        input:placeholder {
            font-size: 14px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #a7a7a7;
        }
    }
    dt:hover {
        background: #dddddd;
    }
    dt {
        width: 81px;
        height: 39px;
        line-height: 39px;
        font-size: 14px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #000000;
        text-align: center;
        cursor: pointer;
    }
}

h3 {
    margin-left: 10px;
    position: relative;
    height: 38px;
    .loginprops {
        position: absolute;
        top: 70px;
        left: -18px;
        width: 80px;
        z-index: 1000;
        background: transparent;

        img {
            width: 100%;
        }
    }
    h4:hover {
        opacity: 0.8;
    }
    h4 {
        width: 80px;
        height: 38px;
        background: #e60012;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        span {
            font-size: 14px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #ffffff;
            margin-left: 3px;
        }
    }
}
</style>
